<template>
	<view>
		<view class="tips-box" v-if="showTip" :style="{top:distanceToTop + 'px'}">
			<view class="tips-content" :style="{backgroundColor: color,marginRight:marginRight}" @click.stop="hideTip">
				<view class='span'>{{ tips }}</view>
				<view class="arrow"
					:style="{'border-color': 'transparent transparent ' + color + ' transparent',right:fixedRight +'px'}">
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showTip: false,
				marginRight: '10px',
				fixedRight: 52,
				distanceToTop: 0
			};
		},
		mounted() {
			// #ifdef MP
			this.getMenuButtonPosition()
			const systemInfo = uni.getSystemInfoSync();
			const screenWidth = systemInfo.screenWidth
			this.fixedRight = this.estimateValue(screenWidth)
			const isShowTips = uni.getStorageSync("isShowTips");
			this.showTip = isShowTips ? false : true;
			setTimeout(() => {
				this.showTip = false;
				this.hideTip()
			}, this.duration * 1000);
			// #endif
		},
		props: {
			tips: {
				type: String,
				default: "点击「添加小程序」，下次访问更便捷",
			},
			duration: {
				type: Number,
				default: 500,
			},
			color: {
				type: String,
				default: '#2182FE'
			}
		},
		methods: {
			getMenuButtonPosition() {
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				this.distanceToTop = menuButtonInfo.top + menuButtonInfo.height
			},
			//拉格朗日插值算法
			estimateValue(width) {
				const data = [{
						width: 375,
						value: 52
					},
					{
						width: 320,
						value: 55
					},
					{
						width: 834,
						value: 38
					},
					{
						width: 1024,
						value: 32
					},
					{
						width: 500,
						value: 48
					}
				];
				// 如果宽度直接等于某个样本的宽度，则返回该样本的值
				for (let i = 0; i < data.length; i++) {
					if (data[i].width === width) {
						return data[i].value;
					}
				}
				// 定义拉格朗日插值多项式L(x)
				function L(n, x) {
					let result = 1;
					for (let i = 0; i < data.length; i++) {
						if (i !== n) {
							result *= (x - data[i].width) / (data[n].width - data[i].width);
						}
					}
					return result;
				}
				// 计算f(x)
				let f_x = 0;
				for (let i = 0; i < data.length; i++) {
					f_x += L(i, width) * data[i].value;
				}
				return Math.round(f_x * 100) / 100;
			},
			hideTip() {
				// #ifdef MP
				uni.setStorageSync("isShowTips", true);
				this.showTip = false;
				this.$emit('change')
				// #endif
			},
		},
		computed: {
			contentStyle() {
				return {
					backgroundColor: this.color,
				}
			}
		}
	};
</script>

<style scoped>
	.tips-box {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 99999;
		opacity: 0.8;
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
		flex-direction: column;
		width: 600rpx;
		animation: tips 1s linear infinite;
	}

	.tips-content {
		border-width: 0;
		margin-top: 20rpx;
		position: relative;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 18rpx 20rpx;
	}

	.span {
		color: #fff;
		font-size: 28rpx;
		font-weight: 400;
	}

	.arrow {
		position: absolute;
		width: 0;
		height: 0;
		top: -38rpx;
		border-width: 20rpx;
		border-style: solid;
		display: block;
	}

	@keyframes tips {
		0% {
			opacity: 0.8;
		}

		50% {
			opacity: 1;
		}
	}
</style>